<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7]><html class="ie ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8]><html class="ie ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-cn"><!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<title>布局</title>
	<link rel="stylesheet" type="text/css" href="http://aimi.li/cmf/css/common.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="../snippet/rainbow-min.css" media="screen" />
	<script type="text/javascript" src="../js/jquery-1.5.1.min.js"></script>
    <script src="../snippet/rainbow-min.js"></script>
    <script src="../js/prettyPre.js"></script>
</head>
<body>
	<div class="ui_m">
		<h2 class="ui_h2">布局</h2>

		<div class="ui_m_item">
			<h3 class="ui_h3">样式说明</h3>
			<div class="ui_con">
				<ul>
					<li>从最外层结构来看，我们将CMF页面分成<span class="tag_1">cmf_toolbar</span>，<span class="tag_1">cmf_header</span>，<span class="tag_1">cmf_nav</span>，<span class="tag_1">cmf_content</span>，<span class="tag_1">cmf_footer</span>这5大区块，它们起到划分DOM结构的作用；</li>
					<li>招商基金页面目前仅存在一种宽度，我们这里暂且称为通用版（1000像素）；</li>
					<li>根据常见的布局，我们提供了<span class="tag_1">cmf_c1</span>，<span class="tag_1">cmf_c2a</span>，<span class="tag_1">cmf_c2b</span>，<span class="tag_1">cmf_c3a</span>这几种布局模式；</li>
					<li>特殊页面布局可以使用cmf_m，cmf_s，cmf_e来命名列，最外层使用cmf_c1和个性化类名，通过这个类名来定义布局；</li>
				</ul>
			</div>
		</div>



		<div class="ui_m_item">
			<h3 class="ui_h3">通栏</h3>
			<p>为了方便做宽窄版，</p>
			<pre class="snippet" data-language="html"><div class="cmf_c1"></div></pre>
		</div>


		<div class="ui_m_item">
			<h3 class="ui_h3">二栏</h3>
			<p>左栏：200像素，右栏：自适应</p>
			<pre class="snippet" data-language="html">
				<div class="cmf_c2a">
					<div class="cmf_m">
						<div class="cmf_m_inner">
							<div class="your_class"></div>
						</div>
					</div>

					<div class="cmf_s">
						<div class="your_class"></div>
					</div>
				</div>
			</pre>
			<p>左栏：自适应，右栏：200像素</p>
			<pre class="snippet" data-language="html">
				<div class="cmf_c2b">
					<div class="cmf_m">
						<div class="cmf_m_inner">
							<div class="your_class"></div>
						</div>
					</div>

					<div class="cmf_s">
						<div class="your_class"></div>
					</div>
				</div>
			</pre>
		</div>

	</div>

</body>
</html>